<template>
  <div class="market-contain">
    <navbar title="市场数据" @back="$router.back()"></navbar>
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item :title="selCity" ref="city">
        <template>
          <!-- 搜索框 -->
          <van-search
            v-model="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
          />
          <van-index-bar>
            <!-- 遍历cityList对象 -->
            <template v-for="(value, key) in cityList">
              <!-- 文章内容 -->
              <van-index-anchor :index="key" :key="key" />
              <van-cell
                @click="changeCity(item)"
                v-for="(item, index) in value"
                :key="index"
                :title="item[0]"
              ></van-cell>
            </template>
          </van-index-bar>
        </template>
      </van-dropdown-item>
      <van-dropdown-item :title="selPosition" ref="position">
        <template>
          <!-- 搜索框 -->
          <van-search
            v-model="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
          />
          <van-index-bar>
            <van-cell
              @click="changePosition(item)"
              v-for="(item, index) in selJobList"
              :key="index"
              :title="item"
            ></van-cell>
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 饼状图 -->
    <div class="pie">
      <h2>工资收入</h2>
      <canvas id="myChart" width="375" height="260"></canvas>
    </div>
  </div>
</template>

<script>
// 导入接口函数
import { getCity, getSalary } from '../../../api/market.js'
// 导入f2工具
import F2 from '@antv/f2'
export default {
  name: 'market',
  data () {
    return {
      value: '',
      // 城市数据
      cityList: '',
      // 默认城市
      selCity: '',
      // 默认岗位列表
      selJobList: '',
      // 默认岗位
      selPosition: '',
      // 图形实例
      salary: null,
      // 工资数据
      percentSalary: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initPic()
    })
  },
  methods: {
    // 获取工资数据
    async getData () {
      const res = await getSalary({
        city: this.selCity,
        position: this.selPosition
      })
      this.percentSalary = res.data.data.percentSalary
      //   绘制图形
      this.draw()
    },
    // 初始化图形对象方法
    initPic () {
      this.salary = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio,
        padding: [20, 'auto']
      })
    },
    // 绘图方法
    draw () {
      // 先去清除之前的图形
      this.salary.clear()
      // 给数据循环添加一个a属性
      this.percentSalary.forEach(value => {
        value.a = '1'
      })
      //   对数据源进行处理
      const map = {}
      this.percentSalary.forEach(function (obj) {
        map[obj.assetType] = obj.percent + '%'
      })
      // 指定数据源
      this.salary.source(this.percentSalary, {
        percent: {
          formatter: function formatter (val) {
            return val + '%'
          }
        }
      })
      this.salary.tooltip(false)
      this.salary.legend({
        position: 'right',
        itemFormatter: function itemFormatter (val) {
          return val + '    ' + map[val]
        }
      })
      this.salary.coord('polar', {
        transposed: true,
        innerRadius: 0.7,
        radius: 0.85
      })
      this.salary.axis(false)
      this.salary
        .interval()
        .position('a*percent')
        .color('assetType', ['#FE5D4D', '#3BA4FF', '#737DDE'])
        .adjust('stack')

      this.salary.guide().html({
        position: ['50%', '45%'],
        html: `<div style="width: 250px;height: 40px;text-align: center;">
      <div style="font-size: 16px">平均资产</div>
      <div style="font-size: 24px">133.08 亿</div>
    </div>`
      })
      this.salary.render()
    },
    // 切换城市方法
    changeCity (item) {
      this.selCity = item[0]
      this.selJobList = item[1]
      this.selPosition = item[1][0]
      this.$refs.city.toggle()
      // 重新绘制图形
      this.getData()
    },
    // 切换岗位方法
    changePosition (item) {
      // 切换默认岗位
      this.selPosition = item
      // 关闭下拉菜单
      this.$refs.position.toggle()
      // 重新绘制图形
      this.getData()
    }
  },
  async created () {
    const res = await getCity()
    this.cityList = res.data.data
    // 设置一个默认的城市：热门中的第一个城市
    this.selCity = this.cityList['热门'][0][0]
    // 设置默认城市下的岗位列表
    this.selJobList = this.cityList['热门'][0][1]
    // 设置默认选中的岗位
    this.selPosition = this.selJobList[0]
    // 获取数据
    this.getData()
  }
}
</script>

<style lang="less" scope>
.market-contain {
  .van-index-anchor {
    background: #e0e0e0;
  }
  // 饼状图样式
  .pie {
    box-sizing: border-box;
    h2 {
      padding: 15px 15px 0;
      font-size: 18px;
    }
  }
}
</style>
